<template>
	<div
		:class="['app-editor-container', 'app-checkbox', `app-checkbox-${name}`]"
	>
		<a-checkbox
			@change="onChange"
			:checked="curValue"
			:disabled="disabled || readOnly"
		></a-checkbox>
	</div>
</template>

<script setup lang="ts">
import { IEvent } from '@/core';
import { computed, Ref } from 'vue';
import { checkboxProps } from './checkbox';
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}

const props = defineProps(checkboxProps);
const emit = defineEmits<EditorEmit>();
const curValue: Ref<boolean> = computed(() => {
	if (!props.value || props.value != props.selectValue) {
		return false;
	} else {
		return true;
	}
});

const onChange = ($event: any) => {
	const value = $event.target.checked ? props.selectValue : props.nullValue;
	emit('component-action', {
		name: `${props.name}`,
		action: 'valueChange',
		data: value,
	});
};
</script>
